<template>
  <div style="height:100%">
    <div id="dataOptionMonthChart" :style="{height:height+'px'}" style="width:100%" />
  </div>
</template>

<script>
import echarts from 'echarts'
import 'echarts-liquidfill/src/liquidFill.js' // 在这里引入    position: relative position: absolute; top: 0; <div class="dogChart bg_color" id="dogChart" style="height:100%"></div>
export default {
  props: {
    height: { type: Number, default: 200 }

  },
  data() {
    return {
      dataOptionMonthChart: null,
      data: {
        history: [],
        option: []
      },
      everyData: [],
      everyDataShow: []
    }
  },
  computed: {},
  watch: {
  },
  mounted() {
    const date = new Date()
    const month = date.getMonth()
    this.getEveryDay(date, month)
  },
  methods: {
    initDate() {
      const $this = this
      $this.$store.dispatch('getHisAndOptionData', $this.everyData).then(response => {
        $this.data.history = response.history
        $this.data.option = response.option
        $this.initChart()
      })
    },
    initChart() {
      this.dataOptionMonthChart = echarts.init(document.getElementById('dataOptionMonthChart'))
      const option = {
        backgroundColor: '#ffffff',
        grid: {
          right: '5%',
          bottom: '10%',
          left: '2%',
          top: '15%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#ddd'
            }
          },
          backgroundColor: 'rgba(255,255,255,1)',
          padding: [5, 10],
          textStyle: {
            color: '#7588E4'
          },
          extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
        },
        legend: {
          top: 10,
          data: ['使用量', '操作量']
        },
        xAxis: {
          type: 'category',
          data: this.everyDataShow,
          boundaryGap: false,
          splitLine: {
            show: true,
            interval: 'auto',
            lineStyle: {
              color: ['#D4DFF5']
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#609ee9'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: ['#D4DFF5']
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#609ee9'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          }
        },
        series: [{
          name: '使用量',
          type: 'line',
          smooth: true,
          showSymbol: false,
          symbol: 'circle',
          symbolSize: 6,
          data: this.data.history,
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(199, 237, 250,0.5)'
              }, {
                offset: 1,
                color: 'rgba(199, 237, 250,0.2)'
              }], false)
            }
          },
          itemStyle: {
            normal: {
              color: '#54BEFF'
            }
          },
          lineStyle: {
            normal: {
              width: 3
            }
          },
          markLine: {
            data: [
              { type: 'average', name: '平均值' }
            ]
          }
        }, {
          name: '操作量',
          type: 'line',
          smooth: true,
          showSymbol: false,
          symbol: 'circle',
          symbolSize: 6,
          data: this.data.option,
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(216, 244, 247,1)'
              }, {
                offset: 1,
                color: 'rgba(216, 244, 247,1)'
              }], false)
            }
          },
          itemStyle: {
            normal: {
              color: '#78E6C9'
            }
          },
          lineStyle: {
            normal: {
              width: 3
            }
          },
          markLine: {
            data: [
              { type: 'average', name: '平均值' }
            ]
          }
        }]
      }

      this.dataOptionMonthChart.resize()
      this.dataOptionMonthChart.setOption(option, true)
    },
    // 获取当月每一天
    getEveryDay(date, month) {
      const curMonth = month + 1
      date.setMonth(curMonth)
      // 获取月份的某一天
      const day = date.getDate()
      for (let i = 1; i <= day; i++) {
        date.setDate(i)
        this.everyDataShow.push(curMonth + '-' + i)
        this.everyData.push(i)
      }
      this.initDate()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.bg_color {
  background-color: #090d4d;
}
</style>
